<!doctype html><html><head><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
 <title>图表工具</title><style>
  html,body {
   text-align: center;
   margin: 0px;
   width: 100%;
   height: 100%;
   overflow-x: hidden;/*取消滚动条*/
   overflow-y: hidden;
  }
  input {
  margin-right: 16px;
  width: 80px;
  }
  button {
  margin-right: 8px;
  }
 </style></head><body><canvas id="canvas"></canvas>
    <br>
    </br>
  <script>
  var xau3 = [
  90,103,91,95,88,95,85,93,87,90,86,98,78,84,74,91,78,90,87,92,86,89,82,
  92, 89,93,77,87,77,80,69,74,68,77,72,76,73,76,70,83,75,88,84,89,81,91,
  88, 92,89,92,89,100,91,94,90,93,89,96,87,91,88,99,91,97,94,102,99,107,
  103,119,114,122,111,114,108,116,108,112,105,113,109,114,110,113,109,116,
  113,124,117,125,122,126,123,126,116,136,133,138,132,136,133,142,134,143,
  137,142,136,139,131,144,139,157,147,152,148,151,148,155,152,155,152,155,
  148,168,165,177,174,181,173,191,171,183,178,192,180,188,183,186,180,184,
  177,182,177,181,154,167,162,166,159,167,160,163,160,169,166,169,163,166,
  161,175,169,180,174,179,167,176,171,175,157,164,153,176,172,175,171,179,
  169,172,167,171,163,169,165,168,162,168,163,167,153,159,154,158,154,164,
  156,163,155,162,156,162,159,162,159,178,174,179,168,175,169,172,164,169,
  163,169,156,162,157,161,154,159,133,140,134,148,145,148,134,139,136,141,
  136,142,139,142,127,130,119,126,121,134,131,134,129,132,128,143,138,141,
  136,139,130,137,131,135,128,133,126,136,122,125,122,126,119,127,124,139,
  128,133,127,131,125,134,128,132,119,125,114,120,115,122,119,123,118,130,
  115,121,118,122,118,121,118,123,117,120,107,117,110,115,111,119,105,108,
  105,111,108,126,120,125,122,127,124,128,123,127,121,124,121,126,123,127,
  123,130,120,131,126,135,131,137,134,137,132,136,131,135,131,134,125,130,
  127,133,113,122,119,126,120,129,122,129,121,135,127,130,124,136,131,136,
  131,134,131,135,132,136,117,124,120,134,129,132,127,130,127,143,139,143,
  139,145,141,153,149,155,152,155,149,152,149,153,146,151,148,151,145,161,
  154,159,155,168,163,166,157,168,165,170,156,159,151,157,146,151,147,155,
  146,151,148,161,158,163,159,164,157,167,164,174,166,173,168,176,170,174,
  169,172,168,174,171,198,191,198,194,207,187,194,191,196,193,201,198,201,
  192,196,191,197,192,199,191,197,189,192,185,192,188,193,189,193,186,196,
  186,189,177,187,182,190,186,195,182,186,181,187,184,187,179,185,172,175,
  171,174,168,173,170,175,168,179,176,184,181,191,186,190,187,190,176,183,
  179,183,168,183,174,178,173,180,177,181,176,187,178,181,176,182,179,183,
  179,185,179,197,188,195,192,207,196,199,190,196,190,199,188,191,186,190,
  179,186,183,187,183,187,181,185,169,180,173,176,169,173,162,172,162,167,
  164,167,162,178,173,181,177,182,178,182,179,183,180,186,183,194,191,195,
  181,185,181,200,194,200,195,198,195,203,199,204,197,201,198,207,200,204,
  194,198,194,197,194,197,193,196,190,198,189,195,191,194,182,199,196,200,
  192,214,198,208,203,206,202,206,201,206,199,219,215,222,216,226,223,230,
  227,235,232,236,232,243,234,237,233,239,236,241,230,235,229,232,229,232,
  228,237,234,244,233,236,232,235,232,238,229
 ];
  var xau1 = [
  191,192,189,192,190,191,190,195,192,193,192,195,193,200,198,200,197,
  199,198,202,200,206,205,207,203,205,203,205,204,205,201,202,198,200,
  198,199,198,200,199,200,196,199,195,196,191,193,190,194,193,194,192,
  194,192,196,195,196,193,194,190,193,192,194,192,194,192,193,192,193,
  192,196,195,196,195,198,197,199,194,195,194,195,193,194,193,194,190,
  191,189,190,188,191,186,187,186,190,189,190,187,189,186,187,184,185,
  184,185,180,181,179,183,181,182,181,186,185,186,185,186,183,187,184,
  185,183,187,181,183,181,183,182,184,182,185,183,184,183,184,182,184,
  182,183,181,182,179,181,174,175,173,174,171,174,170,171,170,172,169,
  171,170,173,172,178,176,177,176,179,177,180,179,180,179,180,173,176,
  173,174,171,172,169,172,170,172,171,173,166,168,166,167,166,168,166,
  168,163,164,163,164,162,166,165,167,166,172,171,172,167,168,167,168,
  165,167,165,166,165,166,163,164,162,167,164,167,164,166,162,168,167,
  168,167,172,171,177,176,178,177,178,173,176,175,176,174,176,175,180,
  178,181,177,178,177,180,178,182,180,181,178,182,179,183,180,184,183,
  186,185,186,183,188,187,188,187,189,188,190,189,192,190,192,191,193,
  192,194,192,194,192,193,192,193,191,195,187,188,187,188,187,188,187,
  189,186,187,186,187,185,186,185,186,183,184,182,184,182,183,181,182,
  181,185,181,189,188,191,190,191,190,191,189,193,192,193,191,192,191,
  193,192,199,197,200,197,198,194,197,196,198,197,200,199,200,195,196,
  195,197,196,197,196,198,195,199,198,203,201,202,199,200,199,202,201,
  202,201,204,200,201,199,201,197,201,198,200,198,200,199,200,198,199,
  198,199,198,200,198,203,202,207,204,205,200,204,203,204,201,202,201,
  202,196,198,196,198,194,195,194,197,196,198,194,197,194,197,195,197,
  195,196,195,196,193,196,192,193,192,193,192,193,192,193,190,193,191,
  193,192,196,195,198,196,198,195,197,193,194,192,193,190,191,189,190,
  189,190,189,192,191,195,192,193,191,194,186,187,182,183,182,183,182,
  183,182,188,187,193,191,193,192,196,194,199,197,198,196,198,197,199,
  198,200,198,199,198,199,198,200,196,197,195,196,192,197,196,199,197,
  200,199,205,204,214,206,207,203,204,202,203,198,199,198,204,203,204,
  202,204,203,207,206,208,206,207,204,205,203,206,202,204,203,204,202,
  206,201,203,202,203,202,203,201,204,203,205,204,206,203,204,202,204,
  202,203,199,203,202,204,203,205,204,214,213,215,214,216,215,217,216,
  218,217,219,217,218,217,218,216,217,216,217,215,216,215,216,215,222,
  220,221,220,221,217,218,217,218,216,218,217,220,218,226,223,227,226,
  228,227,230,229,230,227,233,231,235,232,236,235,236,234,236,233,234,
  232,235,233,234,233,234,233,243,234,237,235,236,235,236,233,239,237,
  239,238,239,238,239,238,239,238,239,236,239,237,241,238,239,238,240,
  234,235,230,231,230,233,232,233,232,233,232,233,231,233,232,234,233,
  235,233,234,233,234,233,234,229,231,230,232,229,232,228,233,231,232,
  231,232,231,237,236,237,234,237,236,237,236,239,238,244,243,244,241,
  243,241,243,233,236,235,236,233,235,234,235,
]
  var tksxb,tdbjg,pylx,pyly,mouseX,mouseY;
  var lloo = 8;
  var hengx = 0.5 * lloo;
  var llo = 5 * lloo;
  var kd = xau1;
  var bbbcl = "rgb(255,255,255)";
  var xoocl = "rgb(10 ,10 ,10 )";
  var xxocl = "rgb(30 ,30 ,30 )";
  var xxxcl = "rgb(50 ,50 ,50 )";
  var ooocl = "rgb(0  ,0  ,0  )";
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var dbjg = 260;
  var ksxb = 550;
  var sbanxia = 0;
  var sbanxiax = 0;
  var sbanxiay = 0;
  var bwjishu = 0;
  var kxxz = 1;
  var canw = canvas.width;
  var canh = canvas.height;

  function dxhxo() {
   let r = [];
   for (let i = 1 ;i < xau1.length;i ++){
    a = xau1[i];
    b = xau1[i-1];
    if (Math.abs(a-b)==1) continue;
    if (a>b) xau1.splice(i, 0, b+1);
    if (a<b) xau1.splice(i, 0, b-1);
   }
  }
  dxhxo();
  function wys() {
   bbbcl = "rgb(255,255,255)";
   xoocl = "rgb(10 ,10 ,10 )";
   xxocl = "rgb(30 ,30 ,30 )";
   xxxcl = "rgb(50 ,50 ,50 )";
   ooocl = "rgb(0  ,0  ,0  )";
  }
  function bys() {
   bbbcl = "rgb(0  ,0  ,0  )";
   xoocl = "rgb(245,245,245)";
   xxocl = "rgb(225,225,225)";
   xxxcl = "rgb(200,200,200)";
   ooocl = "rgb(255,255,255)";
  }

  bys();
  function bwys() {if (bwjishu % 2 == 0) {wys();} else {bys();}bwjishu++;dow();};//背景切换
  function zxdw() { // 绘制折线
   let j = kd.length - ksxb - 1;
   let x =  hengx;
   for (let i = 2; i < j; i++) {
    let o  = parseInt(kd[i + ksxb]);
    let l  = parseInt(kd[i - 1 + ksxb]);
    let ll  = parseInt(kd[i - 2 + ksxb]);
    let m  = parseInt(kd[i + 1 + ksxb]);
    let y = (dbjg - o) * lloo;
    if (x > canw) break;
    ctx.fillStyle = bbbcl;
    //if (Math.abs(o-o1)==6){ctx.fillStyle    = "#ff0000";};
    //if (Math.abs(o-o1)==3){ctx.fillStyle    = "#ff0000";};  
    //if (Math.abs(o-o1)==1){ctx.fillStyle    = "#0000ff";};  		
 
    ctx.fillStyle = o>l ? "#000000" : "#ff0000";
    //ctx.fillRect(parseInt(x+lloo/4),parseInt(y-lloo/4), 1,lloo);//竖线
    ctx.fillRect(parseInt(x),parseInt(y-lloo/2),hengx,lloo);//横线 
    x +=  hengx;  
   };
  };

  function xxxdw() { //绘制一帧
   if (ksxb < 0) ksxb = 0;
   if (lloo > 16) lloo = 16;
   if (lloo < 4) lloo = 4;
   hengx = 0.5 * lloo;
   llo = 5 * lloo;
   let v = 2 * llo;
   /*绘制网格*/
   ctx.fillStyle = xoocl;
   for (let i = 0; i < canw; i = i + lloo) { ctx.fillRect(i,0,1,canvas.height); };
   for (let i = 0; i < canh; i = i + lloo) { ctx.fillRect(0,i,canvas.width,1); };
   ctx.fillStyle = xxocl;
   for (let i = 0; i < canw; i = i + llo) { ctx.fillRect(i,0,1,canvas.height); };
   for (let i = 0; i < canh; i = i + llo) { ctx.fillRect(0,i,canvas.width,1); };
   ctx.fillStyle = xxxcl;
   for (let i = 0; i < canw; i = i + v) { ctx.fillRect(i,0,1,canvas.height); };
   for (let i = 0; i < canh; i = i + v) { ctx.fillRect(0,i,canvas.width,1); };
   /*绘制线*/
   if (kxxz == 1) zxdw();
   if (kxxz == 0) kxdw();
   /*绘制右边的数字*/
   ctx.fillStyle = ("#ffffff");
   ctx.fillRect(canw - 26,0,26,canh);
   ctx.font = "12px 新宋体";
   ctx.fillStyle = "#000000";
   for (let i = v; i < canh; i = i + v) {
    let l = parseInt((dbjg - i / lloo));
    let o = "" + l;
    let bcy = i + 4;
    let f = 25
    if (l < 1000) f = 22;
    ctx.fillText(o,canw - f,bcy);
   };
   /*绘制十字虚线*/
   ctx.fillStyle = '#888888';
   /*十字虚线定位 */
   let ly = mouseY - rect.top;
   ly = ly - ly % lloo;
   let lx = mouseX;
   lx = lx - lx % hengx;
   for (let i = 0; i < canw; i += 14) {
    ctx.fillRect(i,parseInt(ly),6,1);
   }
   for (let i = 0; i < canh; i += 14) {
    ctx.fillRect(parseInt(lx),i,1,6);
   }
   ctx.fillStyle = ("#000000");
   ctx.fillRect(canw - 22,ly + 5,21,-10);
   ctx.fillStyle = '#ffffff';
   ctx.fillText("" + parseInt(dbjg - ly / lloo),canw - 22,ly + 4);
  };
  function dow() { //刷新一帧
   ctx.fillStyle = ooocl;
   ctx.fillRect(0,0,canvas.width,canvas.height);
   xxxdw();
  };
  function cow() { //改变绘图区大小
   canvas.width = document.body.clientWidth;
   canvas.height = document.body.clientHeight-230;
   canw = canvas.width;
   canh = canvas.height;
   rect = canvas.getBoundingClientRect();
   dbjg = kd[ksxb] + canvas.height / 2 / lloo;
   dbjg = dbjg - dbjg % 10;
   dow();
  }
  /*触摸按下，移动，抬起*/
  let 鼠标抬起时间 ,鼠标按下时X坐标 ,鼠标按下时Y坐标
  document.addEventListener('touchstart',function (event) {
   var e = event.touches[0];
   tksxb = ksxb; tdbjg = dbjg;
   sbanxiax = e.clientX;
   sbanxiay = e.clientY;
  },false);
  document.addEventListener('touchmove',function (event) {
   var e = event.touches[0];
   pylx = e.clientX - sbanxiax;
   pyly = e.clientY - sbanxiay;
   if (pyly > 10 * lloo) { dbjg += 10; dow(); sbanxiay = e.clientY; };
   if (pyly < -10 * lloo) { dbjg -= 10; dow(); sbanxiay = e.clientY; };
   ksxb = tksxb - parseInt(pylx / lloo * 2);
   dow();
  },false);
  document.addEventListener('touchend',function (event) {
   sbanxiax = 0; sbanxiay = 0;
   pylx = 0; pyly = 0;
  },false);

  document.onmousedown = function (e) {    // 鼠标按下
   鼠标按下时间  = new Date().getTime();
   鼠标按下时X坐标 = e.clientX;
   鼠标按下时Y坐标 = e.clientY;
   // 判断鼠标是否在 canvas 区域内
   const oxxo = e.clientX >= rect.left && e.clientX <= rect.right &&
                e.clientY >= rect.top && e.clientY <= rect.bottom;
   if (e.button == 0 && oxxo) sbanxia = 1;
   tksxb = ksxb; tdbjg = dbjg;
   sbanxiax = e.clientX;
   sbanxiay = e.clientY;
  };

  document.onmousemove = function (e) {    // 鼠标移动   
   if (sbanxia == 0) { dow(); return; };
   pylx = e.clientX - sbanxiax;
   pyly = e.clientY - sbanxiay;
   if (pyly > 10 * lloo) { dbjg += 10; dow(); sbanxiay = e.clientY; };
   if (pyly < -10 * lloo) { dbjg -= 10; dow(); sbanxiay = e.clientY; };
   ksxb = tksxb - parseInt(pylx / lloo * 2);
   dow();
  };

  document.onmouseup = function (e) {    // 鼠标抬起
    鼠标抬起时间 = new Date().getTime();
    鼠标横向偏移量 = e.clientX - 鼠标按下时X坐标;
    鼠标纵向偏移量 = e.clientY - 鼠标按下时Y坐标;
    if (Math.abs(鼠标纵向偏移量) < 3 &&
        Math.abs(鼠标横向偏移量) < 3 &&
        鼠标按下时Y坐标 < canvas.height &&
        鼠标按下时X坐标 > 0) {
      mouseX = e.clientX;
      mouseY = e.clientY;
      dow();
    }
   sbanxia = 0; sbanxiax = 0; sbanxiay = 0;
   pylx = 0; pyly = 0;
  };

  document.addEventListener("mousewheel",function (event) {// 鼠标滑轮滚动时的逻辑代码
   let a = event.wheelDelta;
   if (a > 0) { 变大() };if (a < 0) { 变小() };
  });

  document.onkeydown = function (e) {}
  window.onresize = function () { cow(); }; cow();
  function 变大() {lloo += 2; dow();};
  function 变小() {lloo -= 2; dow();};
  function 上升() {kd [kd.length - 1] = kd [kd.length - 1] +1; dow();};
  function 下降() {kd [kd.length - 1] = kd [kd.length - 1] -1; dow();};
  function 右移() {kd.push(kd [kd.length - 1]) ; dow();};
  function 左移() {kd.length =  kd.length - 1;   dow();};
  function 清空() {kd.length =  0; ksxb = 0;  dow();};
  function 三点() {kd = xau3;  dow();};
  function 一点() {kd = xau1;  dow();};
  function 添加(a) {kd.push(Number(a.value));   dow();};
 </script>
</body>
</html>